<template>
  <div style="display: flex; flex-direction: row">
    <div style="min-width: 220px">
      <div class="h-full flex flex-row justify-between items-center gap-x-4">
        <div style="width: 32px; height: 32px">
          <img src="@/assets/logo.png" />
        </div>
        <div v-if="LayoutConfig.titleDisplay" class="text-lg" :style="headerStyle" style="min-width: 130px">
          {{ LayoutConfig.titleSetting }}
        </div>
      </div>
    </div>
    <div style="width: 88%">
      <a-menu
        mode="horizontal"
        :theme="theme"
        :collapsed="collapsed"
        @select="handleMenuChanged"
        :selected-keys="selectedKeys"
        @openChange="handleMenuOpenChanged"
      >
        <aside-sub-menu
          v-for="item in menuInfo"
          :key="item?.name"
          :menu="item"
          :menuLevel="0"
          :selectedKeys="selectedKeys"
          :openKeys="menuExpandKeys"
        />
      </a-menu>
    </div>
  </div>
</template>

<script setup lang="ts">
  import useAlLayoutMenu from '@/layouts/hooks/alLayoutMenu'
  import { useRouter } from 'vue-router'
  import { computed, CSSProperties, ref } from 'vue'
  import AsideSubMenu from './AsideSubMenu.vue'
  import LayoutConfig from '@/layouts/layoutConfig.json'

  const collapsed = ref<boolean>(true)

  const router = useRouter()

  const theme = computed(() => {
    if (LayoutConfig.themeSettings === 'DARK_COLOR') {
      return 'dark'
    } else {
      return 'light'
    }
  })
  const headerStyle = computed(() => {
    const style = {
      zIndex: 1,
      textAlign: 'left',
      fontWeight: 400,
      fontStyle: 'normal',
      textDecoration: 'none'
    } as CSSProperties
    style.color = LayoutConfig.titleStyle.color
    style.textAlign =
      LayoutConfig.titleStyle.align === 'ALIGN_LEFT'
        ? 'left'
        : LayoutConfig.titleStyle.align === 'ALIGN_RIGHT'
        ? 'right'
        : 'center'
    if (LayoutConfig.titleStyle.bold) {
      style.fontWeight = 700
    }
    if (LayoutConfig.titleStyle.italic) {
      style.fontStyle = 'italic'
    }
    if (LayoutConfig.titleStyle.underline) {
      style.textDecoration = 'underline'
    }

    return style
  })

  const { selectedKeys, menuInfo, codePathMap, menuExpandKeys } = useAlLayoutMenu()

  // @ts-ignore
  const handleMenuChanged = ({ key }) => {
    if (codePathMap && codePathMap.get(key)) {
      const current = codePathMap.get(key)
      router.push(current.path)
    } else {
      router.push({
        name: key
      })
    }
  }
  const handleMenuOpenChanged = openKeys => {
    menuExpandKeys.value = openKeys
  }
</script>
<style></style>
